<template>
  <div class="check-wrap">
    <el-card class="box-card">
      <el-page-header class="custom-page-header" @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"
            >&nbsp;&nbsp;
            反馈任务详细信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
        </template>
      </el-page-header>

      <el-card class="detail-info">
        <div class="info-item" style="border: 1px; border-color: aquamarine">
          <span style="width: 80px">反馈用户：</span>

          <!-- <span style="justify-content: left;">{{ task.svName }} {{ task.svPhone }}</span> -->
          <span>{{ task.sv_name }} {{ task.sv_phone }}</span>
        </div>
        <hr
          style="
            width: 100%;
            margin: 3px 0 3px 0;
            border: 0;
            border-top: 1px solid #ccc;
          "
        />
        <div
          class="info-item1"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 30px;
          "
        >
          <span style="width: 80px; text-align: left">网格：</span>

          <div style="display: flex; gap: 10px">
            <el-tag type="success" style="font-size: 15px"
              >{{ task.province }}</el-tag
            >
            <el-tag type="success" style="font-size: 15px"
              >{{ task.city }}</el-tag
            >
          </div>
        </div>

        <hr
          style="
            width: 100%;
            margin: 3px 0 3px 0;
            border: 0;
            border-top: 1px solid #ccc;
          "
        />
        <div class="info-item">
          <span style="width: 80px">详细地址：</span
          ><span>{{ task.address }}</span>
        </div>
        <hr
          style="
            width: 100%;
            margin: 3px 0 3px 0;
            border: 0;
            border-top: 1px solid #ccc;
          "
        />
        <div class="info-item">
          <span style="width: 80px;">预估等级：</span
          ><span
            :class="['aqi-level', getAqiClass(task.aqiLevel)]"
            style="border-radius: 8px; width: 130px ;color: white;"
            >{{ task.aqiExplain }} {{ task.aqiChinese }}</span
          >
        </div>
        <hr
          style="
            width: 100%;
            margin: 3px 0 3px 0;
            border: 0;
            border-top: 1px solid #ccc;
          "
        />

        <div
          class="info-item2"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* align-content: center; */
            text-align: left;
            align-items: center; /* 垂直居中 */
          "
        >
          <span style="width: 80px; margin-right: 10px">信息描述：</span>
          <div
            style="
              flex: 1;
              word-break: break-word;
              border: 1px solid #ccc;
              padding: 5px;
            "
          >
            {{ task.content }}
          </div>
        </div>
      </el-card>

      <div class="inputs">
        <div class="input-group">
          <label style="width: 90px; font-weight: bold">SO₂浓度：</label>
          <input
            type="text"
            v-model="so2Concentration"
            placeholder="请输入SO₂浓度"
            class="aqi-input"
            style="border-radius: 15px"
          />
          ug/m3
          <span
            :class="['aqi-color', getAqiClass(so2Level)]"
            style="margin-left: 10px"
            >{{ getConcentrationLevel(so2Level) }}</span
          >
        </div>
        <div class="input-group">
          <label style="width: 90px; font-weight: bold">CO 浓度：</label>
          <input
            type="text"
            v-model="coConcentration"
            placeholder="请输入CO浓度"
            class="aqi-input"
            style="border-radius: 15px"
          />
          ug/m3
          <span
            :class="['aqi-color', getAqiClass(coLevel)]"
            style="margin-left: 10px"
            >{{ getConcentrationLevel(coLevel) }}</span
          >
        </div>
        <div class="input-group">
          <label style="width: 90px; font-weight: bold">PM2.5：</label>
          <input
            type="text"
            v-model="pm25Concentration"
            placeholder="请输入PM2.5浓度"
            class="aqi-input"
            style="border-radius: 15px"
          />
          ug/m3
          <span
            :class="['aqi-color', getAqiClass(pm25Level)]"
            style="margin-left: 10px"
            >{{ getConcentrationLevel(pm25Level) }}</span
          >
        </div>
      </div>

      <div class="submit-section" style="justify-content: center">
        <div class="measured-level" style="margin-bottom: 20px; display: flex; justify-content: center;">
  <span
    :class="['aqi-level', getAqiClass(measuredAqi)]"
    style="width: 350px;
          font-size: 18px;
          font-weight: bold;
          color: white;
          border-radius: 8px;
          display: flex;
          height: 30px;
          text-align: center;
          align-items: center;" 
  >
    <span style="flex: 0 0 170px; text-align: right;">实测AQI等级：</span>
    <span style="flex: 1; text-align: left;">{{ measuredAqi }}级 {{ getAqiDescription(measuredAqi) }}</span>
  </span>
</div>


        <el-button type="primary" @click="submitData">提交实测数据</el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.check-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/02.png") no-repeat center center/cover;
}

.box-card {
  position: relative; /* 设置相对定位 */
  width: 400px; /* 固定宽度 */
  height: 650px; /* 固定高度 */
  border-radius: 10px;
  padding-top: 50px; /* 调整顶部内边距，确保内容不覆盖custom-page-header */
  background: linear-gradient(#79eeab 0%, #d8fce3 75%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.custom-page-header {
  position: absolute; /* 设置绝对定位 */
  top: 0;
  left: 0;
  color: white;
  width: 100%; /* 设置与卡片等宽 */
  background-color: #087241; /* 设置背景颜色 */
  border-radius: 10px 10px 0 0; /* 顶部圆角 */
  padding: 15px;
  box-sizing: border-box; /* 确保padding不会影响宽度 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.custom-page-header .text-large {
  font-size: 20px !important; /* 调整字体大小 */
  font-weight: bold !important; /* 设置字体加粗 */
  color: white;
}

.header-image {
  width: 100%;
  height: auto;
}

.detail-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  height: 30px;
  /* align-content: center; */
  text-align: center;
  align-items: center; /* 垂直居中 */
}

.aqi-level {
  font-weight: bold;
}

.inputs {
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-group label {
  width: 80px;
}

.aqi-input {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
}

.aqi-color {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: white;
  font-weight: bold;
}

.green {
  background-color: green;
}

.yellow {
  background-color: rgb(255, 196, 0);
}

.orange {
  background-color: rgb(255, 111, 0);
}

.red {
  background-color: red;
}

.purple {
  background-color: purple;
}

.brown {
  background-color: brown;
}

.submit-section {
  text-align: center;
}

.measured-level {
}
</style>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElCard, ElButton } from "element-plus";
import axios from "../../axios";
import { useDateFormatter } from "@/composables/UserDateFormatter";
import Qs from "qs";
const route = useRoute();
const router = useRouter();
// 解析传递过来的task数据
const task = ref(JSON.parse(route.query.task));
const token = ref(route.query.token);

console.log(task.value);

// 定义浓度值
const so2Concentration = ref("");
const coConcentration = ref("");
const pm25Concentration = ref("");

// 根据浓度值计算AQI等级
const calculateAqiLevel = (concentration, breakpoints) => {
  const value = parseFloat(concentration);
  if (isNaN(value)) return 0;
  for (let i = 0; i < breakpoints.length; i++) {
    if (value <= breakpoints[i]) return i + 1;
  }
  return breakpoints.length + 1;
};

const so2Breakpoints = [50, 150, 475, 800, 1600];
const coBreakpoints = [5, 10, 35, 60, 90, 150];
const pm25Breakpoints = [35, 75, 115, 150, 250, 500];

const so2Level = computed(() =>
  calculateAqiLevel(so2Concentration.value, so2Breakpoints)
);
const coLevel = computed(() =>
  calculateAqiLevel(coConcentration.value, coBreakpoints)
);
const pm25Level = computed(() =>
  calculateAqiLevel(pm25Concentration.value, pm25Breakpoints)
);

// 根据浓度值获取等级
const getConcentrationLevel = (concentration) => {
  if (!concentration) return "空";
  const value = parseFloat(concentration);
  if (value == 1) return "一";
  else if (value == 2) return "二";
  else if (value == 3) return "三";
  else if (value == 4) return "四";
  else if (value == 5) return "五";
  else if (value == 6) return "六";
};

// 获取AQI等级的class
const getAqiClass = (aqiLevel) => {
  if (aqiLevel == 1) {
    return "green";
  } else if (aqiLevel == 2) {
    return "yellow";
  } else if (aqiLevel == 3) {
    return "orange";
  } else if (aqiLevel == 4) {
    return "red";
  } else if (aqiLevel == 5) {
    return "purple";
  } else if (aqiLevel == 6) {
    return "brown";
  } else return "green";
};

// 获取AQI等级的描述
const getAqiDescription = (aqiLevel) => {
  if (aqiLevel == 1) {
    return "优";
  } else if (aqiLevel == 2) {
    return "良";
  } else if (aqiLevel == 3) {
    return "轻度污染";
  } else if (aqiLevel == 4) {
    return "中度污染";
  } else if (aqiLevel == 5) {
    return "重度污染";
  } else if (aqiLevel == 6) {
    return "严重污染";
  }
};

// 计算实测AQI等级
const measuredAqi = computed(() => {
  return Math.max(so2Level.value, coLevel.value, pm25Level.value);
});

const currentDate = ref(new Date());

const formattedDate = computed(() => {
  return useDateFormatter(currentDate.value, "yyyy-MM-dd hh:mm:ss").value;
});

const date = computed(() => formattedDate.value.slice(0, 10));
const time = computed(() => formattedDate.value.slice(11, 19));

console.log("cityId" + task.value.city + "provinceId:" + task.value.province);
const submitData = async () => {
  currentDate.value = new Date();
  let data = Qs.stringify({
    id: task.value.id,
    // cityId: null,
    // provinceId: null,
    so2: so2Concentration.value,
    // so2Level: so2Level.value,
    co: coConcentration.value,
    // coLevel: coLevel.value,
    pm: pm25Concentration.value,
    // pm25Level: pm25Level.value,
    aqi: measuredAqi.value,
    time: time.value,
    date: date.value,
    gsId: null,
    assignWork: null,
  });
  try {
    const response = await axios.post(
      "http://10.25.43.221:7000/service-admin/verification/updateVerification",
      data,
      {
        headers: {
          Authorization: `Bearer ${token.value}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );
    console.log("提交数据为：", data);
    let result = response.data;
    console.log("数据提交成功:", result);
    router.push({
      path: "/Grider/TaskList",
      query: {
        token: token.value, // 使用已定义的 token 变量
      },
    });
  } catch (error) {
    console.error("数据提交失败:", error);
  }
};

const goBack = () => {
  router.push({
    path: "/Grider/TaskList",
    query: {
      token: token.value, // 使用已定义的 token 变量
    },
  });
};
</script>
